<template>
  <div class="classSituation">
     <div>
       <div class="class_title">
         <span class="title_span">基本信息</span>
         <span @click="$router.push('/classlist')"><el-button type="primary">返回列表</el-button></span>
       </div>
       <div class="class_msg">
            <div class="msg_div">
              <span class="msg_span">班级名称：</span><span>{{obj.classname}}</span>
              <span class="msg_span">所属学院：</span><span>{{obj.shoolid}}</span>
              <span class="msg_span">班级类型: </span><span>{{obj.type}}班</span>
            </div>
            <div class="msg_div">
              <span class="msg_span">现阶段授课老师：</span><span>{{obj.teacherid}}</span>
              <span class="msg_span">现阶段辅导员：</span><span>{{obj.coachid}}</span>
              <span class="msg_span">现阶段课程: </span><span>{{obj.courseid}}</span>
            </div>
         </div>
     </div >
      <div>
       <div class="class_title" >
          <span class="title_span">每日课堂情况</span>
          <span @click="addlist"><el-button type="primary" >添加记录</el-button></span>
       </div>
       <!-- 添加记录 -->
        <el-dialog title="添加记录" :visible.sync="dialogTableVisible" id="dialog" >
           <li class="il">
              <span class="s1">学生姓名</span>
              <el-select v-model="name" placeholder="请选择" style="width:200px;margin:0 12px">
                <el-option
                  v-for="(item,index) in student"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                  >
                </el-option>
              </el-select>
            </li>
            <li class="il">
              <span class="s1">上午出勤情况</span>
              <el-select v-model="am" placeholder="请选择" style="width:200px;margin:0 12px">
                <el-option
                  label="是"
                  value="ok">
                </el-option>
                <el-option
                  label="否"
                  value="no">
                </el-option>
              </el-select>
            </li>
            <li class="il">
              <span class="s1">下午出勤情况</span>
              <el-select v-model="pm" placeholder="请选择" style="width:200px;margin:0 12px">
                <el-option
                    label="是"
                    value="ok">
                  </el-option>
                  <el-option
                    label="否"
                    value="no">
                  </el-option>
              </el-select>
            </li>
            <li class="il">
              <span class="s1">作业完成情况</span>
              <el-select v-model="task" placeholder="请选择" style="width:200px;margin:0 12px">
                <el-option
                    label="是"
                    value="ok">
                  </el-option>
                  <el-option
                    label="否"
                    value="no">
                  </el-option>
              </el-select>
            </li>
             <li class="il">
              <span class="s1">上课是否有互动</span>
              <el-select v-model="interaction" placeholder="请选择" style="width:200px;margin:0 12px">
                <el-option
                    label="是"
                    value="ok">
                  </el-option>
                  <el-option
                    label="否"
                    value="no">
                  </el-option>
              </el-select>
            </li>
            <li class="il">
              <span class="s1">备注</span>
              <span class="my_input"><el-input placeholder="备注" v-model="remarks" clearable prefix-icon="el-icon-user" style="display: inline"></el-input></span>
            </li>
            <div class="btnDiv">
                <el-button  type="primary" @click="addLog">确认</el-button>
                <el-button  type="primary" @click="one">关闭</el-button>  
            </div>
        </el-dialog>
        <!-- 表格 -->
       <div style="display: flex;display:flow-root;">
         <div style="float: left;margin:0 10px">
            <li v-for="(item,index) in options" :key="index" @click="btnTime(item,index)" class="H_btn" :style="{background:is===index?'#1990FF':'#ccc'}">{{item}}</li>
         </div>
           <el-table :data="newdata" style="width: 80%;float: right;">
              <el-table-column prop="studentid" label="学生学号"></el-table-column>
              <el-table-column prop="name" label="姓名" > </el-table-column>
              <el-table-column label="出勤">
              <el-table-column prop="am" label="上午" >
                 <template slot-scope="scope">
                    <el-button type="text" >{{scope.row.am==='ok'?'是':'否'}}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="pm" label="下午" >
                <template slot-scope="scope">
                    <el-button type="text" >{{scope.row.am==='ok'?'是':'否'}}</el-button>
                </template>
                 </el-table-column>
          </el-table-column>
              <el-table-column prop="task" label="作业完成情况">
                 <template slot-scope="scope">
                    <el-button type="text" >{{scope.row.am==='ok'?'是':'否'}}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="interaction" label="是否互动" > 
                <template slot-scope="scope">
                    <el-button type="text" >{{scope.row.am==='ok'?'是':'否'}}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" label="备注" > </el-table-column>
          </el-table>
       </div>
     </div>
   
  </div>
</template>

<script>
export default {
  data(){
    return {
      obj:[],
      dialogTableVisible:false,
      remarks:"",
      options:[],//时间列表
      setTime:"",
      tableData:[],//全部学生列表,
      newdata:[],//当前时间列表
      formLabelWidth:'120px',//
      am:"",
      pm:"",
      task:"",//作业完成情况
      interaction:"",//是否有互动
      student:[],
      name:"",
      is:0,
      studentid:"",
      id:""
    }
  },
  mounted(){
    this.datas()
  },
  methods:{
    addlist(){
      this.dialogTableVisible = true
    },
    datas(){
      this.$httpAxios(this.$api.getClassSituation({classid:sessionStorage.classid}),res=>{
      this.obj=res.data.arr[0]
       let newArr = Array.from(new Set(res.data.brr.map(item=>item.savetime))).map(item=>this.$getDate(item*1))
       this.setTime=newArr[0]
       let newarrB=[]
       for (let i=0;i<res.data.brr.length;i++){
         res.data.brr[i].savetime=this.$getDate(res.data.brr[i].savetime*1)
       }
       this.tableData=res.data.brr
        this.options=newArr
       this.newdata=this.tableData.filter(item=>item.savetime===newArr[0])
       this.student=res.data.namelist
      })
    },
    addLog(){
      this.studentid=this.student.filter(item=>item.name===this.name)[0].studentid
      let {name,am,pm,task,interaction,remarks,studentid}=this
       this.$httpAxios(this.$api.addClassSituation({obj:{
         name,am,pm,task,interaction,remarks,classid:this.obj.classid,studentid
       }}),res=>{ 
         this.$message(res.msg)
       })
       this.datas()
       this.name=""
       this.am=""
       this.pm=""
       this.task=""
       this.interaction=""
       this.remarks=""
       this.studentid=""
      this.dialogTableVisible = false
    },
    one(){
      this.name=""
       this.am=""
       this.pm=""
       this.task=""
       this.interaction=""
       this.remarks=""
      this.dialogTableVisible = false
    },
    btnTime(items,a){
      this.is=a
      this.newdata=this.tableData.filter(item=>item.savetime===items)
    }
  }
}
</script>

<style  scoped>
.class_title{
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #f8f8f8;
  border-left: 6px solid #1990FF;
  display: flex;
  justify-content: space-between;
  margin-bottom:20px
}
.class_title span{
  padding: 0 20px;
}
.msg_div{
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
}
.class_msg{
  width: 100%;
  height: 100px;
}
.msg_div span{
  display: inline-block;
  width: 150px;
}
#dialog{
  width:80%;
  margin:auto
}
.edituser_span{
  width: 150px;
}
.iptDives{
  display: flex;
  margin: 10px auto;
}
.btnDiv{
    width:100%;
    text-align: right;
}
.el-table__header{
  width: 100%;
}
.msg_span{
  padding:0 20px;
}
.H_btn{
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 10px;
  background: #ccc;
  color: #fff;
}
.il{
  display: flex;
  margin: 10px 0;
}
.il>.s1{
  width: 100px;
}
.my_input{
  width: 200px;
  margin-left: 12px;
}
</style>


